<template>
    <view>
        <!--空格区域-->
        <view class="safe-area-inset-bottom">
            <view class="u-bottom-height"></view>
        </view>
        <!--底部按钮-->
        <view class="safe-area-inset-bottom u-bottom-fixed">
            <view class="app-menu main-between">
				<block v-for="(item,index) in list" :key="index">
					<view v-show="item.show" @click="toMenu(item)" class="menu-btn dir-top-nowrap main-center cross-center">
					    <image @load="imgLoading(item)" :style="{'background-color': active === item.key ? theme.background : ''}" :src="active === item.key ? item.active_icon : item.icon"></image>
					    <view :style="{'color': active === item.key ? theme.color : ''}">{{item.name}}</view>
					</view>
				</block>
            </view>
        </view>
    </view>
</template>

<script>

    export default {
        name: 'app-index',
        props: {
            active: {
                type: String
            },
            theme: Object
        },
        data() {
            return {
				list: [
					{
						show: false,
						key: 'activity',
						name: '活动',
						active_icon: './../image/activity-active.png',
						icon: './../image/activity.png',
						path: '/plugins/community/index/index'
					},
					{
						show: false,
						key: 'order',
						name: '订单',
						active_icon: './../image/order-active.png',
						icon: './../image/order.png',
						path: '/plugins/community/order/order'
					},
					{
						show: false,
						key: 'me',
						name: '我的',
						active_icon: './../image/me-active.png',
						icon: './../image/me.png',
						path: '/plugins/community/me/me'
					}
				]
            };
        },
        methods: {
			imgLoading(item) {
				item.show = true
			},
            toMenu(item) {
                if (this.active === item.key) {
                    return false;
                }
                uni.redirectTo({
                    url: item.path
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .u-bottom-fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1500;
        background-color: #ffffff;
    }
    .u-bottom-height {
        height: 90upx;
    }
    .app-menu {
        height: #{90rpx};
        width: 100%;
        background-color: #fff;
        font-size: #{22rpx};
        border-top: #{2rpx} solid #e2e2e2;
        .menu-btn {
            width: #{200rpx};
            color: #666;
            text-align: center;
            height: #{90rpx};
            image {
                width: #{40rpx};
                height: #{40rpx};
                margin-bottom: #{3rpx};
            }
        }
    }
</style>